<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%">
    <el-col :span="8">
      <el-text style="font-size: 30px;margin-right: 5%">库存记录</el-text>
      <el-text size="small">共{{curList.length}}条记录</el-text>
    </el-col>
    <el-col :span="16" style="text-align: right;padding-right: 2%">

      <el-select v-model="curPeriod" placeholder="选择日期" size="large" @change="handleSelect" style="width: 20%;">
        <el-option
            v-for="item in periodList"
            :key="item.key"
            :label="item.key"
            :value="item.value"
        />
      </el-select>
    </el-col>
  </el-row>
  <div style="margin-top: 2vh">
    <el-table :data="tableData(curList)"
              height="74vh"
              style="width: 100%;"
              :header-cell-style="{ background: '#f6f6f6',  }"

    >
      <el-table-column label="商品名/条码" width="300">
        <template #default="scope">
          <el-row>
            <el-col span="24" style="padding-left: 5%;">
              <el-row style="max-width: 145px">
                <el-text>
                  {{ store.getLocalStorage(scope.row.code)!=null?store.getLocalStorage(scope.row.code).goodsName:"已删除商品"}}
                </el-text>
              </el-row>
              <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="cost" label="成本价" />
      <el-table-column prop="num" label="变动数量"/>
      <el-table-column prop="remarks" label="变动类型"/>
      <el-table-column prop="createDate" label="变动时间"/>
    </el-table>
    <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
      <div style="flex: 4;" >
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="->,prev, pager, next, jumper"
            :total="curList.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {store} from "@/store";
import request from "@/utils/request";
import {dateTimeUtils} from "@/utils/dateTimeUtils";

const curList=ref([])
const currentPage = ref(1)
const pageSize = ref(30)
const periodList= ref([])
const curPeriod=ref("")
const tableData = (list) => {
  return list.filter(
      (item, index) =>
          index < currentPage.value * pageSize.value &&
          index >= pageSize.value * (currentPage.value - 1)
  );
};
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
onMounted(()=>{
  periodList.value=[]
  let i=0
  while (i<12){
    let dateTemp=new Date()
    dateTemp=dateTimeUtils.getDate(dateTemp.setMonth( dateTemp.getMonth()-i ))
    periodList.value.push({
      key:dateTemp.year+"-"+dateTemp.month,
      value:dateTemp.year+"-"+dateTemp.month+"-"+"01T00:00:00"
    })
    i++
  }
  curPeriod.value=periodList.value[0].value
  handleSelect(periodList.value[0].value)
})
const handleSelect = (key) => {
  let endDate=new Date(key)
  endDate=dateTimeUtils.getDate(endDate.setMonth( endDate.getMonth()+1 ))
  request.post("/goods/get/GoodsLogByPeriod",{
    storeId:store.getLocalCurrentStoreMain().storeId,
    startDate:key,
    endDate:endDate.year+"-"+endDate.month+"-"+endDate.day+"T00:00:00"
  }).then(res=>{
    curList.value=res.data.filter(p=>{
      return p.code.length===13
    })
    curList.value.sort(function (a, b) {
      return b.createDate.localeCompare(a.createDate)
    })
  })
}
</script>

<style scoped>

</style>